<template>
  <div class="myTag" :style="bg">
    <span class="name">🔖 {{info}}</span>
  </div>
</template>

<script setup>
import { computed, defineProps } from 'vue';

const props = defineProps({
  info: {
    type: String,
    default: "一只小毛驴"
  },
  color: {
    type: String
  }
});

const bg = computed(() => ({
  background: props.color
}));
</script>

<style scoped>
  .myTag {
    @apply cursor-pointer text-[var(--white)] rounded-5px p-8px;
  }

  .myTag:hover {
    @apply bg-[var(--gradualRed)] !important;
  }
</style>
